<template>
    <a-card title="订阅用户管理" :bordered="false">
        <!-- Card Header -->

        <template slot="extra">
            <a-form layout="inline" @submit.prevent="searchSubmit">
                <a-form-item>
                    <a-input class="width120" v-model="searchForm.nickname" allowClear placeholder="昵称"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-select :placeholder="'性别'" allowClear showSearch v-model="searchForm.sex"
                              style="width: 120px">
                        >
                        <a-select-option v-for="(item, index) in wxmpUserSexOPT" :key="index" :value="item.value">{{
                            item.label }}
                        </a-select-option>
                    </a-select>

                </a-form-item>
                <a-form-item>

                    <a-select :placeholder="'订阅状态'" allowClear v-model="searchForm.subscribe"

                              style="width: 120px">
                        <a-select-option :value="true">关注中</a-select-option>
                        <a-select-option :value="false">已取消</a-select-option>
                    </a-select>


                </a-form-item>

                <a-form-item>
                    <a-input class="width120" v-model="searchForm.province" allowClear placeholder="省份"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-input class="width120" v-model="searchForm.city" allowClear placeholder="城市"></a-input>
                </a-form-item>


                <a-form-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button icon="download" type="primary" @click="syncWxmpUserBatch">用户同步</a-button>
                </a-form-item>


            </a-form>
        </template>


        <transition name="fade">
            <div class="batch-box" v-show="selectOpenIds.length>0">
                <a-button type="primary" @click="openTagModal('add')">批量加标签</a-button>
                <a-button type="primary" @click="openTagModal('remove')">批量去标签</a-button>
            </div>
        </transition>


        <a-table bordered :columns="columns" :rowKey="record => record.openId" :dataSource="dataSource"
                 :pagination="pagination"
                 :row-selection="{ selectOpenIds: selectOpenIds, onChange: onSelectChange }"
                 :loading="loading" @change="handleTableChange">

            <!-- 头像 -->
            <template slot="headImgUrl" slot-scope="text, record">
                <a-avatar :size="50" class="exAvatar" :src="text">{{ record.nickname.substr(0, 1) }}</a-avatar>
            </template>


            <!-- 订阅状态 -->
            <template slot="subscribe" slot-scope="text, record">

                <a-tag v-if="text" color="#87d068">关注中</a-tag>
                <a-tag v-else>已取消</a-tag>

            </template>
            <!-- 订阅来源-->
            <template slot="subscribeScene" slot-scope="text, record">
                {{$exMod.findDict(wxmpSubscribeSceneOPT, text)}}
            </template>

            <template slot="sex" slot-scope="text, record">
                {{$exMod.findDict(wxmpUserSexOPT, text)}}

            </template>

            <template slot="tag" slot-scope="text, record">
                {{ formatTagName(text)}}
            </template>


            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">


                <a @click="syncWxmpUser(record)">更新</a>
                <a-divider type="vertical"/>
                <a @click="openEdit(record)">备注</a>

            </template>
        </a-table>


        <editModal v-if="editShow" :editRecord="editRecord" @closeModal="closeModal"/>

        <tagModal v-if="tagShow" :tagType="tagType" @closeModal="batchUpdateTag"/>
    </a-card>
</template>


<script>
    import {wxmpTagDict} from '../../../../util/internal.api'
    import {dictLoad} from '../../../../util/internal.api';
    import {pagination, userTable} from '../public/colums';
    import {userList, userSyncBatch, userSync, batchupTags} from '../public/http';

    export default {
        components: {
            editModal: () => import('./editModal'),
            tagModal: () => import('./tagModal')
        },

        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                tagShow: false,  //编辑器打开状态
                tagChecked: null, //选定的标签号码
                tagType: null,  //标签方法

                dataSource: [],
                selectOpenIds: [], //选中的组件
                pagination: {...pagination}, //复制预设的分页参数
                loading: false, //表格loading
                columns: userTable, //表头管理
                searchForm: {},

                wxmpTagOPT: [],
                wxmpSubscribeSceneOPT: [],
                wxmpUserSexOPT: [],

            };
        },
        methods: {

            //用户标签替换
            formatTagName(str) {
                if (this.$exMod.isEmptyString(str)) {
                    return null;
                }
                const nameArr = [];
                const array = str.split(",")
                this.wxmpTagOPT.filter(item => {
                    if (array.includes(item.value.toString())) {
                        nameArr.push(item.name);
                    }
                })
                return nameArr.join(",")
            },

            //表格多选监听
            onSelectChange(selectOpenIds) {
                this.selectOpenIds = selectOpenIds;

            },
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                userList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeModal(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },


            //3.1 同步订阅用户

            syncWxmpUserBatch() {
                const _this = this;
                this.$confirm({
                    title: '确定要同步订阅用户吗?',
                    content: "如果公众号订阅用户数量较多请尽量选择服务器空闲时间进行同步操作",
                    onOk() {
                        userSyncBatch().then(res => {
                            _this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                _this.getTableList();
                            }
                        })
                    }
                    ,

                })
                return false

            },


            syncWxmpUser(record) {
                const _this = this;
                this.$confirm({
                    title: '确定要重新从微信公众平台内同步【 ' + record.nickname + ' 】的资料吗？',

                    onOk() {
                        userSync(record.openId).then(res => {
                            _this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                _this.getTableList();

                            }
                        })
                    }
                    ,

                })
                return false


            },

            //打开标签设置框
            openTagModal(type) {
                this.tagShow = true;
                this.tagChecked = null;
                this.tagType = type;
            },
            //批量修改用户标签
            batchUpdateTag(e) {
                this.tagShow = false
                if (e.render) {
                    this.loading = true
                    const data = e.data;
                    data.openIds = this.selectOpenIds;
                    batchupTags(data).then(res => {
                        this.$exMod.ajaxMessage(res);
                        if (res.code === 0) {
                            this.getTableList();
                        }
                    })
                    this.loading = false
                }

            },

            //数据初始化
            async init() {
                await dictLoad('WxmpUserSex').then(res => (this.wxmpUserSexOPT = res));
                await dictLoad('WxmpSubscribeScene').then(res => (this.wxmpSubscribeSceneOPT = res));
                await wxmpTagDict().then(res => this.wxmpTagOPT = res)


                this.getTableList();

            },


        },
        created() {
            this.init();
        }
    };
</script>

